<%--
  Created by IntelliJ IDEA.
  User: 29012
  Date: 2021/10/7
  Time: 19:09
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix='fmt' uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <title>课程详情</title>
  <%--jq--%>
  <script src="${pageContext.request.contextPath}/js/jquery-3.6.0.min.js"></script>
  <%--hearder.css--%>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/header/header.css">
  <%--设置页面左上角浏览器图标--%>
  <link rel="shortcut icon"  href="image/zhengKe.ico" type="image/x-icon" />
  <%--header.js--%>
  <script src="${pageContext.request.contextPath}/js/header/header.js"></script>
  <%--  course.css  --%>
  <link rel="stylesheet" href="${pageContext.request.contextPath}/css/learn/learn.css">
  <style>
    .icon_star{
      /*课程评分暗淡星*/
      background-image: url("${pageContext.request.contextPath}/images/learn/stars.png");
    }
    .user_star{
      background-image: url("${pageContext.request.contextPath}/images/learn/stars.png");
    }
  </style>
  <%--  course.js  --%>
  <script>
    window.onload = function () {
      course_info();
      scoring_star();
      user_star();
      thumb();
    };

    function course_info() {
      $(".course_menu .a").click(function () {
        $(".course_menu .a").each(function () {
          $(this).removeClass("on");
        });
        $(this).addClass("on");
        if ($(this).text() == "章节") {
          $(".course_evaluate").hide();
          $(".chapters").show();
        } else {
          $(".course_evaluate").show();
          $(".chapters").hide();
        }
      });
    }

    // 课程评分点亮
    function scoring_star() {
      var score = parseFloat(
              $(".evaluation_score").text()
      );
      var starts = parseInt(score / 2);
      $(".icon_star")
              .slice(0, starts)
              .css(
                      "background-image",
                      "url('${pageContext.request.contextPath}/images/learn/red_stars.png')"
              );
    }

    // 用户评分点亮
    function user_star() {
      $(".user_score").each(function () {
        var score = parseFloat($(this).text());
        var starts = parseInt(score / 2);
        $(this)
                .parent()
                .children()
                .slice(0, starts)
                .css(
                        "background-image",
                        "url('${pageContext.request.contextPath}/images/learn/red_stars.png')"
                );
      });
    }

    // 点赞
    function thumb() {
      $(".actions_a").click(function () {
        var num = parseInt(
                $(this).children().eq(1).text()
        );
        if (
                $(this).children().eq(1).data("click") ==
                0 ||
                $(this).children().eq(1).data("click") ==
                undefined
        ) {
          num++;
          $(this).children().eq(1).text(num);
          $(this).children().eq(1).data("click", 1);
        } else {
          num--;
          $(this).children().eq(1).text(num);
          $(this).children().eq(1).data("click", 0);
        }
      });
    }

  </script>
</head>
<body>

<div id="header">
  <div id="nav">
    <div id="menu">

      <!-- logo -->
      <div id="logo">
        <a href="${pageContext.request.contextPath}/index">
          <svg t="1634123912096" class="icon" viewBox="0 0 1335 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="9038" width="60" height="60">
            <path d=" M1296.918261
                        267.130435c-199.902609-89.043478-400.695652-170.963478-600.153044-258.671305a79.693913 79.693913
                        0 0 0-62.330434 0C438.53913 94.386087 238.636522 178.086957 44.521739 260.897391c-20.925217
                        8.45913-41.850435 16.918261-41.850435 44.521739s20.925217 37.398261 41.850435
                        44.52174c181.648696 81.92 365.078261 156.716522 548.062609 240.417391a142.024348 142.024348 0 0
                        0 146.031304 0 489.73913 489.73913 0 0 1 83.255652-37.843478c116.646957-49.864348
                        229.286957-99.728696 350.386087-150.038261v421.175652c0 24.932174 8.013913 33.391304 32.946087
                        33.391304s33.391304-4.452174 33.391305-33.391304c0-125.106087
                        4.452174-254.21913-4.006957-379.325217 0-49.864348 8.45913-83.255652
                        62.330435-95.72174a41.850435 41.850435 0 0 0
                        38.733913-41.850434c0-24.932174-17.808696-33.391304-38.733913-39.624348z" p-id="9039"></path>
            <path d=" M1088.556522 548.507826c0-29.384348-8.013913-29.384348-28.939131-20.925217-112.64
                        51.2-225.28 95.721739-333.467826 146.031304a143.805217 143.805217 0 0 1-116.646956 0C496.862609
                        623.304348 384.222609 578.782609 272.027826
                        527.582609c-20.925217-8.45913-24.932174-4.006957-24.932174 16.918261V712.347826a211.478261
                        211.478261 0 0 0 141.579131 229.286957 640.222609 640.222609 0 0 0 570.768695-8.459131
                        211.923478 211.923478 0 0 0 129.113044-222.608695c-4.006957-53.871304 0-107.742609
                        0-162.059131z" p-id="9040"></path>
          </svg>
        </a>
      </div>

      <!-- 首页 -->
      <div class="jump">
        <a href="${pageContext.request.contextPath}/index">首页</a>
      </div>

      <!-- 全部课程 -->
      <div class="jump">
        <a href="${pageContext.request.contextPath}/course">全部课程</a>
      </div>

      <!-- 苏鸿社区 -->
      <div class="jump">
        <a href="${pageContext.request.contextPath}/community?label=推荐">苏鸿社区</a>
      </div>

      <!-- 搜索 -->
      <div class="function seach">
        <input type="text" placeholder="请输入关键字..." />
        <div class="header_hot">
          <a href="#" class="hot_info">Vue</a>
          <a href="#" class="hot_info">Python</a>
        </div>
        <a href="#" id="search_icon">
          <svg t="1634122309089" class="icon" viewBox="0 0 1024 1024" version="1.1"
               xmlns="http://www.w3.org/2000/svg" p-id="3764" width="20" height="20">
            <path d=" M953.474215 908.234504l-152.576516-163.241391c61.92508-74.48211 95.81186-167.36973
                            95.81186-265.073744 0-229.294809-186.63531-415.930119-416.102133-415.930119-229.294809
                            0-415.930119 186.63531-415.930119 415.930119s186.63531 415.930119 415.930119
                            415.930119c60.032925 0 118.00168-12.55703 172.186125-37.327062 16.169326-7.396607
                            23.221905-26.318159
                            15.825298-42.315471-7.396607-16.169326-26.318159-23.221905-42.315471-15.825298-45.927768
                            20.813707-94.951789 31.478582-145.695952 31.478582-194.031917
                            0-351.94087-157.908953-351.94087-351.94087 0-194.031917 157.908953-351.94087
                            351.94087-351.94087 194.031917 0 351.94087 157.908953 351.94087 351.94087 0
                            91.339493-34.918864 177.86259-98.048043 243.743995-12.213002 12.729044-11.868974 33.026709
                            0.860071 45.239711 1.032085 0.860071 2.236183 1.204099 3.268268 2.064169 0.860071 1.204099
                            1.376113 2.752226 2.408198 3.956325l165.477574 177.00252c6.192508 6.70855 14.793214
                            10.148833 23.393919 10.148833 7.912649 0 15.653284-2.92424 21.845792-8.600706C964.827146
                            941.433227 965.515202 921.135562 953.474215 908.234504z" p-id="3765" id="search-img">
            </path>
          </svg>
        </a>
      </div>

      <!-- 登录注册 -->
      <div class="function ">
        <div class="consumer">
          <!-- 登录/注册  -->
          <c:if test="${empty ServiceResponse}">
            <a href="${pageContext.request.contextPath}/login/login.jsp" class="head portrait" class="login">
              <svg t="1634123426498" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="6398" width="30" height="30">
                <path d=" M880.182 987.568H143.818C98.705 987.568 62 952.882 62 910.245V801.52c0-122.986
                                110.113-223.042 245.455-223.042h409.09C851.887 578.478 962 678.533 962 801.52v108.726c0
                                42.636-36.704 77.322-81.818 77.322z m-736.364-82.197l736.363
                                0.379V801.52c0-77.873-73.408-141.224-163.637-141.224h-409.09c-90.228 0-163.636 63.351-163.636
                                141.224v103.851zM511.67 547.796c-140.984 0-255.682-114.697-255.682-255.682 0-140.984
                                114.697-255.682 255.682-255.682 140.985 0 255.682 114.697 255.682 255.682 0.001 140.985-114.697
                                255.682-255.682 255.682z m0-429.546c-95.871 0-173.864 77.993-173.864 173.864S415.8 465.978
                                511.67 465.978s173.864-77.993 173.864-173.864S607.541 118.25 511.67 118.25z" p-id="6399">
                </path>
              </svg>
            </a>
          </c:if>
          <c:if test="${!empty ServiceResponse}">
            <a href="${pageContext.request.contextPath}/user/mycourse.jsp" class="consumer_portrait">
              <img src="http://${ServiceResponse.data.consumerProfile}" alt="">
            </a>
            <!-- 注销 -->
            <a href="${pageContext.request.contextPath}/cons/logout" class="logout">
              <svg t="1634123313659" class="icon" viewBox="0 0 1024 1024" version="1.1"
                   xmlns="http://www.w3.org/2000/svg" p-id="5401" width="30" height="30">
                <path d=" M424.19 675.833l64.823 64.823 229.869-229.869-229.869-229.869-64.823 64.823 118.612
                                119.072H98.236v91.948h444.567L424.19 675.833zM833.817 97.022H190.183c-51.031 0-91.948
                                41.376-91.948 91.948v183.895h91.948V188.97h643.633v643.633H190.183V648.708H98.236v183.895c0
                                50.571 40.917 91.948 91.948 91.948h643.633c50.571 0 91.948-41.376
                                91.948-91.948V188.97c-0.001-50.571-41.377-91.948-91.948-91.948z" p-id="5402"></path>
              </svg>
            </a>
          </c:if>
        </div>
      </div>

    </div>
  </div>
</div>


<div class="main">

  <!-- 课程信息栏顶部 -->
  <div class="course_infos">
    <div class="infors_hearder_space">
      <div class="path">
        <a href="../index.html">首页</a>
        <i class="lower_stratum"></i>
        <a href="${pageContext.request.contextPath}/course">全部课程</a>
        <i class="lower_stratum"></i>
        <a href="">
          ${courseInfo.data.courseName}
        </a>
      </div>
      <div class="course_title">
        <h2>${courseInfo.data.courseName}</h2>
      </div>


      <!-- 教师信息 -->
<%--      <div class="teacher">--%>
<%--                    <span class="teacher_portrait">--%>
<%--                        <a href="javascript:void(0);">--%>
<%--                            <img src="javascript:void(0);" alt="">--%>
<%--                        </a>--%>
<%--                    </span>--%>
<%--        <span class="teacher_name">--%>
<%--                        <a href="javascript:void(0);">IMOOC老齐</a>--%>
<%--                    </span>--%>
<%--      </div>--%>


      <!-- 课程学习信息 -->
      <div class="learn_information">
        <div class="learn_difficulty">
          <span class="meta">难度 :</span><span class="learn_difficulty_value">${courseInfo.data.courseDifficulty}</span>
        </div>
        <div class="learn_duration">
          <span class="meta">时长 :</span><span class="learn_duration_value"> ${courseInfo.data.courseDuration}小时</span>
        </div>
        <div class="learn_number">
          <span class="meta">学习人数 :</span><span class="learn_number_value">${courseInfo.data.courseLearnNumber}</span>
        </div>
        <div class="learn_score">
          <span class="meta">综合评分 :</span><span class="learn_score_value">${courseInfo.data.other1}</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 课程信息栏菜单 -->
  <div class="course_info_menu">
    <ul class="course_menu">
      <li>
        <a href="javascript:void(0);" class="a on">章节</a>
      </li>
      <li>
        <a href="javascript:void(0);" class="a">评价</a>
      </li>
    </ul>
  </div>

  <!-- 课程信息主内容 -->
  <div class="course_info_main">

    <!-- 课程信息侧边盒子  -->
    <div class="course_aside_info">
      <div class="learn_info">
          <c:if test="${purchasedState.code == 200}">
            <c:if test="${courseRate.code == 200}">
              <div class="learn_position">
                上次学至 ${courseRate.data.video.videoName}  已学 <fmt:formatNumber type="number" value="${courseRate.data.learningRate.endLength*100}" maxFractionDigits="0"/>%
              </div>
              <a href="${pageContext.request.contextPath}/video/${courseRate.data.video.videoId}" class="learn_continue">继续学习</a>
            </c:if>
            <c:if test="${courseRate.code == 201}">
              <div class="learn_position">
                还没有学习记录快开始学习吧！
              </div>
            </c:if>
          </c:if>
          <c:if test="${purchasedState.code == 201}">
            <div class="learn_position">
              快购买课程去学习吧！
            </div>
            <a href="${pageContext.request.contextPath}/buy/${courseInfo.data.courseId}" class="learn_continue">购买课程</a>
          </c:if>
      </div>

    </div>
    <!-- 课程章节开始 -->
    <div class="chapters">
      <!-- 课程信息介绍盒子  -->
      <div class="course_main">
        ${courseInfo.data.courseDetails}
      </div>

      <!-- 课程章节盒子 -->
      <c:forEach items="${chapterInfo.data}" var="eachChapter">
          <div class="chapter">
          <!-- 章节标题 -->
          <h3>
              ${eachChapter.chapter.chapterName}
          </h3>
          <div class="chapter_description">
              ${eachChapter.chapter.chapterDetails}
          </div>
          <!-- 章节标题 end -->
          <!-- 章节小节 -->
          <div class="video">
            <c:forEach items="${eachChapter.videoRateVOS}" var="eachvideoRateVOS">
              <a href="${pageContext.request.contextPath}/video/${eachvideoRateVOS.video.videoId}" class="chapter_video">
                <span class="video_name">${eachvideoRateVOS.video.videoName}</span>
                <span class="video_duration">${eachvideoRateVOS.video.videoDuration}分钟
                <c:if test="${!empty eachvideoRateVOS.learningRate}">
                  已经学习<fmt:formatNumber type="number" value="${eachvideoRateVOS.learningRate.endLength*100}" maxFractionDigits="0"/>%
                </c:if>
                </span>
                <div class="learn_icon"></div>
              </a>
            </c:forEach>
          </div>
          <!-- 章节小节 end -->
        </div>
      </c:forEach>


    </div>

    <!-- 课程评价 -->
    <div class="course_evaluate">
      <div class="evaluation_info">
        <div class="evaluation_title">课程综合评分 :</div>
        <div class="evaluation_score">
          ${courseInfo.data.other1}
        </div>
        <div class="star_box">
          <i class="icon_star"></i>
          <i class="icon_star"></i>
          <i class="icon_star"></i>
          <i class="icon_star"></i>
          <i class="icon_star"></i>
        </div>
      </div>
      <c:forEach items="${reviewInfo.data}" var="review">
        <div class="user_evaluation">
          <!-- 头像 -->
          <a href="javascript:void(0);" class="img_box">
            <img src="" alt="lose">
          </a>
          <!-- 用户姓名+评分 -->
          <div class="user_info">
            <a href="javascript:void(0);" class="username">${review.consumer.consumerName}</a>
            <!-- 用户评分个人小盒子 -->
            <div class="user_star_box">
              <i class="user_star"></i>
              <i class="user_star"></i>
              <i class="user_star"></i>
              <i class="user_star"></i>
              <i class="user_star"></i>
              <span class="user_score">${review.courseReview.courseSocer}分</span>
            </div>
          </div>
          <!-- 用户评价 -->
          <div class="content">${review.courseReview.courseReviewContent}</div>
          <!-- 点赞+评价时间 -->
          <div class="operation">
            <div class="actions">
              <a title="赞" href="javascript:void(0);" class="actions_a">
                <span class="icon_thumb_revert"></span>
                <em>0</em>
              </a>
            </div>
            <div class="time_div">时间：<span class="time">
              <fmt:formatDate value="${review.courseReview.courseReviewTime}" pattern="yyyy年MM月dd日 HH:mm:ss"/>
<%--                ${review.courseReview.courseReviewTime}--%>
            </span></div>
          </div>
        </div>
      </c:forEach>
    </div>
  </div>
</div>
<div class="footer"></div>



</body>
</html>
